<template>
	<el-tree :data="treeData" :props="defaultProps" node-key="id" :default-expanded-keys="expandNodeId" ref="tree" :indent="10" accordion @node-click="nodeClick" :default-expand-all="false" :highlight-current="true"></el-tree>
</template>
<script>
export default {
	data() {
		return {
			treeData: this.$store.state.auxiliaryStore.treeData,
			defaultProps: {
				label: 'categoryName',
				children: 'children'
			}
		}
	},
	computed: {
		expandNodeId() {
			return this.$store.state.auxiliaryStore.expandNodeId;
		}
	},
	watch: {
		treeData() {
			let expandNodeId = this.$store.state.auxiliaryStore.expandNodeId;
			this.$nextTick(() => {
				this.$refs.tree.setCurrentKey(expandNodeId[0]);
			});
		}
	},
	methods: {
		nodeClick(row) {
			this.$store.commit('auxiliaryStore/updateRow', row);
			this.$store.commit('auxiliaryStore/updateExpandNodeId', row['id']);
			let activeName = this.$store.state.auxiliaryStore.activeName;
			if(activeName[0] === 'first') {
				if(row['level'] === 0 && row['children'].length > 0) {
					this.$store.commit('auxiliaryStore/updateTableData', row['children']);
				} else {
					this.$store.commit('auxiliaryStore/updateTableData', []);
				}
			} else if(activeName[0] === 'second') {
				if(row['level'] === 0) {
					this.$store.commit('auxiliaryStore/updateTableData', row['children']);
				} else if(row['level'] === 1) {
					this.$store.dispatch('auxiliaryStore/getSubClassTableData');
				}
			}
		}
	}
}
</script>